﻿<MCard Class="overflow-hidden"
       Color="purple lighten-1"
       Dark>
    <MToolbar Flat
              Color="purple">
        <MIcon>mdi-account</MIcon>
        <MToolbarTitle class="font-weight-light">
            User Profile
        </MToolbarTitle>
        <MSpacer></MSpacer>
        <MButton Color="purple darken-3"
                 Fab
                 Small
                 OnClick="()=>_isEditing = !_isEditing">
            @if (_isEditing)
            {
                <MIcon>
                    mdi-close
                </MIcon>
            }
            else
            {
                <MIcon>
                    mdi-pencil
                </MIcon>
            }
        </MButton>
    </MToolbar>
    <MCardText>
        <MTextField TValue="string"
                    Disabled="!_isEditing"
                    Color="white"
                    Label="Name"></MTextField>
        <MAutocomplete TItem="Model"
                       TValue="int"
                       TItemValue="int"
                       Disabled="!_isEditing"
                       Items="_states"
                       Filter="CustomFilter"
                       Color="white"
                       ItemText="r=>r.Name"
                       ItemValue="r=>r.Id"
                       Label="State"></MAutocomplete>
    </MCardText>
    <MDivider></MDivider>
    <MCardActions>
        <MSpacer></MSpacer>
        <MButton Disabled="!_isEditing"
                 Color="success"
                 OnClick="Save">
            Save
        </MButton>
    </MCardActions>
    <MSnackbar @bind-Value="_hasSaved"
               Timeout="2000"
               Absolute
               Bottom
               Left>
        Your profile has been updated
    </MSnackbar>
</MCard>

@code {
    public class Model
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Abbr { get; set; }
    }

    private bool _hasSaved;
    private bool _isEditing;
    private List<Model> _states = new List<Model>
        {
            new Model
            {
                Name="Florida",
                Abbr="FL",
                Id=1
            },
            new Model
            {
                Name="Georgia",
                Abbr="GA",
                Id=2
            },
            new Model
            {
                Name="Nebraska",
                Abbr="NE",
                Id=3
            },
            new Model
            {
                Name="California",
                Abbr="CA",
                Id=4
            },
            new Model
            {
                Name="New York",
                Abbr="NY",
                Id=5
            }
        };

    public bool CustomFilter(Model item, string queryText, string text)
    {
        var textOne = item.Name.ToLowerInvariant();
        var textTwo = item.Abbr.ToLowerInvariant();
        var searchText = queryText.ToLowerInvariant();

        return textOne.IndexOf(searchText) > -1 ||
          textTwo.IndexOf(searchText) > -1;
    }

    public void Save()
    {
        _isEditing = !_isEditing;
        _hasSaved = true;
    }
}